<template>
	<div>
		<div class="title">
			<span>热点管理</span>
			<button @click="add()">添加</button>
		</div>
		<el-table width="100%" :data="list">
			<el-table-column label="描述" prop="memo"></el-table-column>
			<el-table-column label="热度" prop="hot"></el-table-column>
			<el-table-column label="类型" prop="type"></el-table-column>
			<el-table-column label="图片" prop="">
				<template #default="scope">
					<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<button @click="del(scope.row)">删除</button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default{
		name:'Hotcon',
		data(){
			return{
				list:[]
			}
		},
		methods:{
			add(){
				this.$router.push('/admin/hotconadd')
			},
			del(val){
				this.axios.delete('/api/adm/hot/delete/'+val).then( (res)=>{
					this.location()
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			location(){
				this.axios.get('/api/adm/hot/findAll').then( (res)=>{
					if(res.status===200){
						this.list=res.data.data
					}
				} ).catch( (error)=>{
					
				} )
			}
		},
		created() {
			this.location()
		}
	}
</script>

<style scoped>
	.title{
		margin-bottom: 5%;
	}
	.title span{
		font-size: 23px;
		margin: auto;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		display: block;
		line-height: 50px;
		border-bottom: 2px solid gainsboro;
		font-weight: bold;
	}
	.title button{
		float: right;
		height: 30px;
		margin-top: 10px;
		width: 100px;
		color: gold;
		margin-right: 10px;
		background-color: #FF0000;
		border-radius: 5px;
		border: none;
	}
	.title button:hover{
		cursor: pointer;
		background-image: url(../../../../public/bannerimg/10.jpg);
	}
	table{
		width: 80%;
		margin: auto;
	}
	table th{
		font-weight: bold;
		line-height: 30px;
		height: 30px;
	}
	table tr td,th{
		text-align: center;
		border: 1px solid black;
	}
	table img{
		width: 80px;
		height: 80%;
		vertical-align: middle;
	}
	table button{
		background-color: #FF0000;
		border: none;
		color: gold;
		border-radius: 5px;
	}
	.main tr td button:hover{
		background-color: gold;
		color: red;
		cursor: pointer;
	}
</style>
